package Git2024_5_28;

public class M3_1 {
    // 创建maven前端工程创建
    /**
     * 1.创建新工程 选择new project 选择maven jdk1.8 点击创建即可
     * 2.将src删除
     * 3.在聚合工程名下创建新目录及自目录 格式为: 总目录名/子目录名(类似于用"."创建子包)
     */
    // 前后端使用的技术的概述
    /**
     * 前端: html(负责网页主题) css(负责页面修饰) javascript(负责行为)...
     * 后端: SSM框架 数据库...
     *
     * 组成:
     * 1.内容层[HTML]: 文字 图片 链接...
     * 2.样式层[CSS]: 颜色 大小 位置 表现...
     * 3.行为层[JavaScript]: 负责页面交互效果 轮播图...
     */
    // HTML - 超文本标记语言
    /**
     * 概述:
     *  负责网页的内容
     *  浏览器能够识别并解析这种语言
     * 超文本: 比普通文本更泛用 浏览器公认文本形式 认可度更广 功能强大
     * 目前学习的是最新版的HTML版本: HTML5 简称H5
     *  1.HTML由大量标签/标记组成,分为:
     *      1.1 双标记标签 <head></head>
     *      1.2 单标记标签 <br> 或 <br/> 两种写法都可
     */
    //HTML文件创建时的默认标签
    /**
     * 前提: 创建HTML文件时 后缀可以是HTM 也可以是HTML

     * <!DOCTYPE html> 声明当前文档类型为HTML文档格式
     * <html lang="en"> 总标签 文档标签都作为子标签在其中,en表示英文,zh为中文
     * <head>
     *    <meta charset="UTF-8"> 格式 国际通用UTF-8 也有使用国标GBK,GB2312,GB18030的
     *    <title> 设置网页标题 </title>
     * </head>
     * <body>
     *     网络主体内容
     * </body>
     * </html>
     */
    // 浏览器
    /**
     * F12打开浏览器开发者工具
     * Elements元素 Console控制台 Sources原代码 Network网络
     * 常用浏览器:
     * Navigator Netscape 网景公司 火狐浏览器前身
     * FireFox Mozilla 大脚马公司 [火狐浏览器]
     * IE/Edge Microsoft 微软公司
     * Google Chrome [谷歌浏览器]
     * Safari Apple 苹果公司 不支持windows系统
     * Opera 挪威ASA公司 跨平台浏览器 [欧鹏浏览器]
     */
    // 前置内容
    /**
     * 标签属性:
     * <form action="" method=""></form>
     * 其中 action 和 method 就是属性
     * 不同属性必须用空格隔开
     * 属性都在开始的标签中
     * 属性不区分先后顺序
     * 属性值必须要放在""中
     * 属性名与属性值之间用"="连接
     * 单值属性: 值和属性名同名 属性值可以忽略 例如readonly
     *
     * 注释:
     * 注释格式:<!--注释正文-->
     * 快捷键: ctrl + / 再按一次可以取消注释
     * 注释不能嵌套注释 也不能写在标签中
     *
     * 标签:
     * 标签复制快捷键: ctrl + d --- 复制并换行
     */
    // 常用标签
    /**
     * 简单标签: 输入标签内容按 tab 键可以自动补齐 例如 b tab -> <b></b>
     文本相关标签
     * 一.文本双标签
     * 1.<b> 加粗文字 </b> - bold
     * 2.<i> 斜体文字 </i>
     * 3.<u> 下划线文字 </u> - underline
     * 4.<s> 删除线文字 </s>
     * 5.<mark> 高亮显示文字 (默认黄色 变色需要使用CSS) </mark>

     * 二.文本单标签
     * 1.<br> 换行
     * 2.<hr> 分割线

     * 三.转义符
     * 1.空格符: &nbsp;
     * 2.小于号: &lt; - less than
     * 3.大于号: &gt; - Greater Than

     * 四.标题标签(h - heading)
     * 1.<h1>一级标题</h1>
     * 2.<h2>二级标题</h2>
     * 3.<h3>三级标题</h3>
     * 4.<h4>四级标题</h4>
     * 5.<h5>五级标题</h5>
     * 6.<h6>六级标题</h6>
     * 注意: 没有七级标签 只有1到6级

     * 五.段落标签
     * 特点: 独占一行 自动换行 自动行间距
     * 1.<p> 段落内正文 </p>
     * 2.=Lorem + tab 生成假文 - 常常用于测试段落标签
     *   例如: <p>=Lorem[tab]</p>

     * 六-1.列表标签
     *  注意: 1.li为列表标签的子标签 有ol/ul必须有li
     *       2.列表是可以嵌套列表的
     * 1.有序列表 - OrderList
     *  <ol type="a">
     *     <li> 表格正文 </li>
     *     <li> 表格正文 </li>
     *     <li> 表格正文 </li>
     * </ol>
     *  注意: 有序列表的默认li提示词为'1.','2.','3.',可以通过ol中的属性type=""进行更改
     * 2.无序列表 - UnOrderList
     *  <ul type="none">
     *     <li>Java核心编程</li>
     *     <li>从入门到精通</li>
     *     <li>键盘敲烂,月薪过万</li>
     * </ul>
     *  注意: 无序列表的type="none"属性能够将li的小圆点提示符去掉
     * 六-2.列表嵌套
     * 例如:
     * <ul>
     *     <li>凉菜
     *         <ol>
     *             <li>拍黄瓜</li>
     *         </ol>
     *     </li>
     *     <li>\..</li>
     *     <li>\..</li>
     * </ul>
     *  注意: 在嵌套列表时 需要嵌套在外层的<li></li>中 而非再其之后进行嵌套
     */
    /**
     分区标签
     * 1.span: 行内分区,用来选中一行中的部分内容
     *  例如: XXX<span style="color: deeppink">Xxx</span>
     *       1.1 其中 Xxx 部分就是被行内分区标签框选的内容 在前端代码中显示的字体为深粉色"deeppink"
     *       1.2 style="": 用于设置被框选字段的格式 如设置颜色等等

     * 2.div: 块级分区,独占一行,自动换行
     *        用class=""属性可以定义div的分区
     *         如main表示正文部分
     *  例如: <div class="main">我是div文本,独占一行</div>
     *       其中 class="": 用于表示该字段为页面的哪一部分 "main"表示此为正文部分

     * 3.HTML5新增的带有语义的分区标签
     *   此类标签应用较少 用户端是没有区别的 能大大提升代码的可读性,复用性,以及应用于后续页面继承
     */
    /**
     图片标签
     * 插入图片标签: <img src="" alt="" title="">
     * 属性: 1. src="资源的路径"
     *      2. alt="图片未加载显示的文段"
     *      3. title="鼠标悬停在图片上显示的内容"
     *      4. height="图片高度(单位为像素px)" - 当只设置
     *      5. width="图片宽度(单位为像素px)"
     * 路径区别:
     *  一.相对路径: 相对于当前路径定位资源
     *       1.1 同级目录: 直接写文件名 如0.jpg
     *       1.2 下一级目录: img/1.jpg
     *       1.3 上一级目录: ../3.png
     *       1.4 上n级目录: ../../../X.png - 以此类推
     *   二.绝对路径: 引用第三方网站图片时应用较多
     *       浏览器: -> 右键图片
     *              -> 点击'检查'
     *              -> 双击该路径(该路径会被选中,鼠标悬停在该地址上会显示图片缩略图)
     *              -> 右键复制路径
     *       例如: <img src="https://cdn.tmooc.cn/bsfile//imgad///5706defebbff4fdfb0a19b70d6bef77b.png">
     *       注意: 若该路径的图片被删除或被重命名后 原路径会失效
     *            绝对路径并非将图片储存在本地 而是利用链接地址指向浏览器中的图片
     */
    /**
     超链接标签
     * 标签: <a href=""> 被赋予超链接功能的内容 </a>
     *  其中: href=""属性: 其中装载着超链接的目的路径
     * 1.跳转到本地资源
     *  1.1 相对路径: 相对于当前路径 与上述相对路径用法一致
     *  1.2 绝对路径
     * 2.跳转到外部(网络)资源
     * 将跳转的目的网址填入即可,例如:
     *  <a href="https://www.baidu.com"> 百度首页 </a>
     * 3.赋予图片超链接功能
     *  格式为:
     *  <a href="超链接目的网址">
     *     <img src="图片路径" alt="图片未加载显示的内容">
     *  </a>
     * 4.普通超链接会将当前页面覆盖,若要将超链接的目的页面在新启标签页打开,需要:
     *  设置是否打开空白页属性:
     *    4.1 target="_blank" - 新启标签页打开超链接页面
     *    4.2 target="_self" - 在当前标签页打开超链接页面
     *   用法:
     *   <a href="超链接目的网址" target="_blank">新启标签页打开超链接</a>
     * 5.锚点
     * 例如跳转到首页功能 跳转到索引功能
     * 问题: 当超链接属性未规定值时 点击页面的超链接内容会刷新当前页面实现类似回到首页的功能 但是先前缓存的页面内容可能丢失
     * 措施: 1.需要在每一个标题标签中添加id属性: id="id值"
     *      2.之后在超链接属性中使用 href="#id值" 的格式进行跳转 并将其放在指定序列的索引位置即可
     *  例如: 索引位置
     *          <a href="#c2">第二章索引</a>
     *          索引内容...
     *       正文位置
     *          <h3 id="c2">第二章</h3>
     *          正文内容...
     * 应用: 同理 href="#" 则表示回到顶部 一般将其至于页面底部或常驻悬浮于页面主体位置旁
     *  例如: <a href="#">回到顶部</a>
     */
    /**
     表格标签
     * 1.表格基本标签:
     *  <tr></tr> 一行
     *  <th></th> 列名 - 自动加粗,自动居中
     *  <td></td> 一列
     *  <caption></caption> 表格名称 - 自动居中
     * 2.<table></table>标签属性:
     *  border="1" - 设置边框 单位默认为像素 也可以写成'1px'
     *  style="border-collapse: collapse" - 设置实线边框
     * 基本格式例如:
     * <table border="1" style="border-collapse: collapse">
     *     <caption>表格名称</caption>
     *     <tr>
     *         <!--第一行-->
     *         <th>列名1</th>
     *         <th>列名2</th>
     *         <th>列名3</th>
     *         ...
     *     </tr>
     *     <tr>
     *         <!--第二行-->
     *         <td>第二行的第一列单元格</td>
     *         <td>第二行的第二列单元格</td>
     *         <td>第二行的第三列单元格</td>
     *         ...
     *     </tr>
     *     <tr>...</tr>
     *     <tr>...</tr>
     * </table>
     * 3.跨行合并和跨列合并
     *  3.1 格式:
     *     <tr>
     *         <!--跨列合并-->
     *         <td colspan="2">2-1</td>
     *         <td>2-3</td>
     *         <!--跨行合并-->
     *         <td rowspan="3">2-4</td>
     *     </tr>
     *  3.2 <td></td>/<th></th>标签属性:
     *      colspan="n": 表示跨n列合并单元格
     *      rowspan="m": 表示跨m行合并单元格
     * 4.快捷操作:
     *   1. table>tr*3>td*8 + tab - 快速创建一个表格 包含3行 每一行中有八列单元格
     *   2. alt shift 上下 - 将光标位置的html代码进行上下行的移动
     * 5.基础理论:
     *   1. input: 控件 组件
     *   2. SSC语言:
     *       1. 合并边框线并不是2变1 而是将两条线捏在一起
     *       2. SSC语言特征之一 --- ':'开始 ';'结束
     */
    // 表单
    /**
     表单标签
     * 表单提供了可供输入的控件 并将输入的内容收集起来传输给服务器
     * name: 前端的关键字 不能用于规定为普通文本名称
     * table>tr*10>td>input + tab
     * 一.常用标签及属性:
     *  1.<form action="" method=""></form>: 表单标签 被框选的内容为表单格式
     *      action="#": '#'占位符 表示提交给当前页面
     *      method="": 请求方法 如post
     *  2.<input type="">: 表示此为一个框 默认输入格式是普通文本输入格式
     *      readonly: 单值属性 表示只读
     *      type="text": type表示设置输入的内容的格式 此为普通文本格式
     *      type="password": 表示输入的是密码格式的密文
     *      name="": 表示该文本框的名称 - 数据传输时的映射字段
     *      placeholder="": 占位内容 在用户输入内容时会消失
     *      value="": 表示默认显示的内容(该内容有意义),可修改
     *   3. 文字与选框关联:
     *    <input type="checkbox" id="yes"> ---- 设置一个多选框 并赋予id属性
     *    <label for="yes">请同意此协议</label> -- 将字段 "请同意此协议" 与该选框关联 使得点击文字也能对选框进行勾选
     *     id="唯一id值": 用于设置该选框的唯一标识
     *     for="唯一id值": 用于通过id值对指定选框进行关联
     * 二.属性区分:
     *  value:
     *      1.文本框 - 表示默认在框中显示的内容 可更改 用户输入的内容也会保存在value属性中
     *      2.按钮 - 表示按钮的显示名称
     *  maxlength: 输入框允许输入的最大长度
     *  readonly: 只读 只允许查看 不允许编辑 - 单值属性 属性名和属性值同名 省略属性值保留属性名
     *  placeholder: 提示文本占位符
     *  单选框:
     *  <input type="radio"> - 表示单选框
     *      1.name属性: 同名的单选框会被分入同一个比较组中 此时可以进行单选
     *                 未规定或name属性值不同的单选框并不在同一组中 因此都可以选中
     *      2.value属性: 若未设置该属性 则默认上传的属性值为'on'
     *      3.checked单值属性: 表示默认选中指定单选按钮 可手动重新选择
     *  多选框:
     *  <input type="checkbox"> - 表示多选框
     *      1.value属性同理,表示将默认的属性值'on'改为特定内容
     *      2.checked属性同理
     *  下拉选框:
     *      1.value属性: 表示提交时的属性值
     *  若标签内属性名被删除线修饰 表示该属性写法为过期写法 但是不影响使用
     * 三.常用属性2:
     *  日期选框:
     *     type="date"
     *  颜色选框:
     *     type="color"
     *  文件选框:
     *     type="file" 原则是没有大小限制的 可以传输文件或图片等等
     *  按钮:
     *     type="button" 表示此为普通按钮 可与指定业务链接以实现指定功能
     */
    /**
     视频插入标签
     * <video src="视频路径" controls muted autoplay loop style="width: 1700px"></video>
     *  controls: 单值属性 表示控件 用于显示控件
     *  muted: 静音
     *  autoplay: 自动播放
     *  loop: 循环播放
     *  style="width: 1700px": 视频修改尺寸的格式
     */
}
